import Button from 'antd/es/button';
import Modal from 'antd/lib/modal/Modal';
import React, { useEffect, useState } from 'react';
import { copyTranslateResult } from 'src/libs/utils';
import { getShareUrl } from 'src/services/AnalyseManage';

interface publishShareProps{
    isModalVisible: boolean
    pageId: string
    onCancel: () => void
}
const PublishShare = ( props: publishShareProps ) => {
	const [ url, setUrl ] = useState( '' );
	const handleShareUrl = async() => {
		const data = {
			pageId: props.pageId
		};
		const res = await getShareUrl( data );
		if ( res.data ) {
			setUrl( `${res.data.data?.address}/${res.data.data?.code}` );
		}
	};
    
	useEffect( () => {
		if ( props.isModalVisible ) {
			handleShareUrl();
		}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [ props.isModalVisible ] );

	return (
		<Modal title="分享链接" visible={props.isModalVisible} footer={[ null, null ]} onCancel={() => props.onCancel()}>
			<div id="share_copy">{url}</div>
			<Button onClick={() => copyTranslateResult( '#share_copy' )} type="primary">复制</Button>
		</Modal>
	);
};

export default React.memo( PublishShare );